iT邦幫忙

2024 iThome 鐵人賽

DAY 16
0
Mobile Development

少年K的Swift奇幻漂流記系列 第 16

Day16 Swift MessageBoard App 實作 Part 4:TableView 左滑

  • 分享至 

  • xImage
  •  

在 Swift 的開發中,UITableView 是常用的 UI 元件之一,除了基本的顯示資料功能之外,還可以加入額外的操作,比如左右滑動來執行刪除、編輯等動作。在這篇文章中,我們將介紹如何透過 UISwipeActionsConfiguration 來實現表格的左滑刪除與右滑編輯功能,並在刪除和編輯時與 Realm 資料庫整合,達到即時更新資料的效果。

左滑刪除功能實作

使用 tableView(_:trailingSwipeActionsConfigurationForRowAt:) 來處理左滑刪除的動作。當使用者在表格上左滑時,會顯示 "刪除" 選項,點擊後彈出確認視窗,讓使用者確認是否要刪除該訊息。

// trailingSwipeActionsConfigurationForRowAt 是用來處理表格左滑的動作
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

    // 定義一個刪除的動作,當使用者左滑時會顯示 "刪除" 選項
    let deleteAction = UIContextualAction(style: .destructive, title: "刪除") { [weak self] (_, _, completionHandler) in

        // 使用 weak self 防止循環引用
        guard let self = self else { return }

        // 根據當前滑動的列,獲取對應的訊息
        let message = self.messageArray[indexPath.row]

        // 刪除該訊息並更新表格
        self.deleteMessage(message, at: indexPath)

        // 操作完成後,告訴系統這個動作已經處理完畢
        completionHandler(true)
    }
    // 設定刪除動作的背景顏色為紅色
    deleteAction.backgroundColor = .red

    // 將刪除動作加入配置中
    let configuration = UISwipeActionsConfiguration(actions: [deleteAction])

    // 設定當使用者完全滑動時,自動執行第一個動作(刪除)
    configuration.performsFirstActionWithFullSwipe = true
    return configuration
}

在這段程式碼中,我們使用 UIContextualAction 來定義刪除的動作,並透過 completionHandler(true) 來告訴系統這個動作已經完成,刪除操作會自動執行。

結論

明天會教刪除訊息的邏輯


上一篇
Day15 Swift MessageBoard App 實作 Part3
下一篇
Day17 Swift MessageBoard App 實作 Part5:左滑內的刪除邏輯
系列文
少年K的Swift奇幻漂流記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言